<script setup>
import { GridLayout, GridItem } from 'grid-layout-plus';
import { ref, computed ,inject,provide} from 'vue';
//定义一些属性的变量，比如颜色，字体，背景，边框等**************************************************************
// const yanshecolor = ref('')
// const yuanshutext = ref('')

// const objname = ref('')
// const yansheid = ref('')

//主数据的数组对象，就是存整个界面的元素的坐标，大小、属性等元素的数组
//x、y 是坐标，w、h是宽高，i是元素的唯一标识，isShow是是否显示，isTuoDong是是否拖动，isSuoFang是是否缩放
const isshowufun=inject('layoutListMain');

const layoutListMain = isshowufun

//显示框里面的数组
const layoutListXianShiShuRu = ref([]);

//隐藏框里面的数组;
const layoutListYingCangShuRu = ref([]);


//显示框里面的下拉数组
const layoutListXianShiXiaLa = ref([]);

//隐藏框里面的下拉数组;
const layoutListYingCangXiaLa = ref([]);


// 计算属性*************************************************************************
 
// 1.1计算已显示的元素
const layoutListXianShiShuRuItems = computed(() => {
     
    layoutListXianShiShuRu.value=[] //把数组置空
    for (let i = 0; i < layoutListMain.value.length; i++) {

        if (layoutListMain.value[i].isShow ) {

            let obj={ x: 0, y: 0, w: 6, h: 1, i: layoutListMain.value[i].i, isShow: true,type:layoutListMain.value[i].type,ws:layoutListMain.value[i].w} 
            layoutListXianShiShuRu.value.push(obj);
        }
        
     
    }
    return layoutListXianShiShuRu.value 
});

//1.2 计算已隐藏的元素
const layoutListYingCangShuRuItems = computed(() => {
    layoutListYingCangShuRu.value=[]
    for (let i = 0; i < layoutListMain.value.length; i++) {
        if (!layoutListMain.value[i].isShow  ) {

            let obj={ x: 0, y: 0, w: 6, h: 1, i: layoutListMain.value[i].i, isShow: false ,type:layoutListMain.value[i].type,ws:layoutListMain.value[i].w}  
            layoutListYingCangShuRu.value.push(obj);
        }
        
        
    }
    return layoutListYingCangShuRu.value 
});

// // 1.3计算已显示的下拉框
// const layoutListXianShiXiaLaItems = computed(() => {
     
//     layoutListXianShiXiaLa.value=[] //把数组置空
//      for (let i = 0; i < layoutListMain.value.length; i++) {
 
//          if (layoutListMain.value[i].isShow && layoutListMain.value[i].type=='xiala') {
 
//              let obj={ x: 0, y: 4, w: 6, h: 1, i: layoutListMain.value[i].i, isShow: true,type:layoutListMain.value[i].type} 
//              layoutListXianShiXiaLa.value.push(obj);
//          }
         
      
//      }
//      return layoutListXianShiXiaLa.value 
//  });
 
//  //1.4 计算已隐藏的下拉框
//  const layoutListYingCangXiaLaItems = computed(() => {
//     layoutListYingCangXiaLa.value=[]
//      for (let i = 0; i < layoutListMain.value.length; i++) {
//          if (!layoutListMain.value[i].isShow && layoutListMain.value[i].type=='xiala') {

//              let obj={ x: 0, y: 0, w: 6, h: 1, i: layoutListMain.value[i].i, isShow: layoutListMain.value[i].isShow ,type:layoutListMain.value[i].type} 
//              layoutListYingCangXiaLa.value.push(obj);
//          }

//      }
//      return layoutListYingCangXiaLa.value 
//  });


//钩子函数************************************************************************
onMounted(() => {
    // //主数组在引用组件的时候传入，另外两个隐藏框和显示框里面的数组在这里初始化页面完成后就赋值
    // for (let i = 0; i < layoutListMain.value.length; i++) {
    //     layoutListXianShiShuRu.value.push({ x: 0, y: 0, w: 6, h: 1, i: layoutListMain.value[i].i, isShow: layoutListMain.value[i].isShow })
    //     layoutListYingCangShuRu.value.push({ x: 0, y: 0, w: 6, h: 1, i: layoutListMain.value[i].i, isShow: layoutListMain.value[i].isShow })
    // }
    // console.log(layoutListXianShiShuRu.value)
    // console.log(layoutListYingCangShuRu.value)
    // isshowufun=inject('layoutListMain');
})

//三个主要的拖动方法************************************************************************
//1.隐藏界面往显示界面拖
const yingCangToXianShi = (event, rongqi) => {

    console.log(event.srcElement.innerText
    );
    let name = event.srcElement.innerText;
    console.log(event.clientX + "," + event.clientY);

    //容器的宽度、长度、x\y值等变量信息
    let rongqix = document.getElementById(rongqi).getBoundingClientRect().x;
    let rongqiy = document.getElementById(rongqi).getBoundingClientRect().y;
    let rongqiw = document.getElementById(rongqi).getBoundingClientRect().width;
    let rongqih = document.getElementById(rongqi).getBoundingClientRect().height;

    console.log("容器" + "坐标" + rongqix + "," + rongqiy);
    console.log("容器宽和高" + rongqiw + "," + rongqih);

    //元素相对于容器的横纵坐标
    let yuanshuxiangduix = event.clientX - rongqix;
    let yuanshuxiangduiy = event.clientY - rongqiy;

    if (yuanshuxiangduix > 0 && yuanshuxiangduix < rongqiw && yuanshuxiangduiy > 0 && yuanshuxiangduiy < rongqih) {
        console.log("鼠标横\纵坐标落到容器里面了\r相对于容器左上角原点的坐标是x:" + yuanshuxiangduix + " ,Y:" + yuanshuxiangduiy + "\r");

        let meiyifengx = rongqiw / 24;
        let meiyifengy = rongqih / 1;

        //取整数算横格子和纵格子
        let gezhix = Math.floor((event.clientX - rongqix) / meiyifengx);
        let gezhiy = Math.floor((event.clientY - rongqiy) / meiyifengy);   

        console.log("鼠标横格子原本是" + (event.clientX - rongqix) / meiyifengx + "取整后是：" + gezhix);
        console.log("高24："+rongqih+"鼠标纵格子原本是" + (event.clientY - rongqiy) / meiyifengy + "取整后是：" + gezhiy);

        for (let i = 0; i < layoutListMain.value.length; i++) {
            if (layoutListMain.value[i].i == name) {

                layoutListMain.value[i].x = gezhix
                layoutListMain.value[i].y = gezhiy
                layoutListMain.value[i].isShow = true

                 
            }
        }

        for (let i = 0; i < layoutListXianShiShuRu.value.length; i++) {
            if (layoutListXianShiShuRu.value[i].i == name) {
 
                layoutListXianShiShuRu.value[i].isShow = true;
                console.log(layoutListXianShiShuRu.value );
            }
        }

        for (let i = 0; i < layoutListYingCangShuRu.value.length; i++) {
            if (layoutListYingCangShuRu.value[i].i == name) {
 
                layoutListYingCangShuRu.value[i].isShow = false;
                console.log(layoutListYingCangShuRu.value );
            }
        }



    }
    else {
        console.log("鼠标横坐标落到容器外面了");
    }
}

//1.显示界面往往隐藏界面拖，比如主界面和右侧的显示界面
const xianShiToYingCang = (event, rongqi) => {

console.log(event.srcElement.innerText
);
let name = event.srcElement.innerText;
console.log(event.clientX + "," + event.clientY);

//容器的宽度、长度、x\y值等变量信息
let rongqix = document.getElementById(rongqi).getBoundingClientRect().x;
let rongqiy = document.getElementById(rongqi).getBoundingClientRect().y;
let rongqiw = document.getElementById(rongqi).getBoundingClientRect().width;
let rongqih = document.getElementById(rongqi).getBoundingClientRect().height;

console.log("容器" + "坐标" + rongqix + "," + rongqiy);
console.log("容器宽和高" + rongqiw + "," + rongqih);

//元素相对于容器的横纵坐标
let yuanshuxiangduix = event.clientX - rongqix;
let yuanshuxiangduiy = event.clientY - rongqiy;

if (yuanshuxiangduix > 0 && yuanshuxiangduix < rongqiw && yuanshuxiangduiy > 0 && yuanshuxiangduiy < rongqih) {
  console.log("鼠标横\纵坐标落到容器里面了\r相对于容器左上角原点的坐标是x:" + yuanshuxiangduix + " ,Y:" + yuanshuxiangduiy + "\r");

  let meiyifengx = rongqiw / 24;
  let meiyifengy = rongqih / 1;

  //取整数算横格子和纵格子
  let gezhix = Math.floor((event.clientX - rongqix) / meiyifengx);
  let gezhiy = Math.floor((event.clientY - rongqiy) / meiyifengy);

  console.log("鼠标横格子原本是" + (event.clientX - rongqix) / meiyifengx + "取整后是：" + gezhix);
  console.log("鼠标纵格子原本是" + (event.clientY - rongqiy) / meiyifengy + "取整后是：" + gezhiy);

  
  for (let i = 0; i < layoutListMain.value.length; i++) {
            if (layoutListMain.value[i].i == name) {

                layoutListMain.value[i].x = gezhix
                layoutListMain.value[i].y = gezhiy
                layoutListMain.value[i].isShow = false

                 
            }
        }

        for (let i = 0; i < layoutListXianShiShuRu.value.length; i++) {
            if (layoutListXianShiShuRu.value[i].i == name) {
 
                layoutListXianShiShuRu.value[i].isShow = false;
                console.log(layoutListXianShiShuRu.value );
            }
        }

        for (let i = 0; i < layoutListYingCangShuRu.value.length; i++) {
            if (layoutListYingCangShuRu.value[i].i == name) {
 
                layoutListYingCangShuRu.value[i].isShow = true;
                console.log(layoutListYingCangShuRu.value );
            }
        }




}
else {
  console.log("鼠标横坐标落到容器外面了");
}
}

const divRongQi=inject('divRongQi');


const moved = (i, newX, newY) => {
  console.log("元素名称：" + i + "x: " + newX + " y: " + newY);

}

const handleResize = () => {
  console.log('resize');
}

</script>


<template>
    <div class="main">
        <div class="top">
            <div class="left" id="rongqiyingcang"> 
                <div style="width: 100%;height: 24px;border-bottom: 1px solid black; padding-left: 8px;">已隐藏元素</div>
                <GridLayout v-model:layout="layoutListYingCangShuRu" :col-num="6" :row-height="24" is-draggable is-resizable
                    vertical-compact use-css-transforms>
                    <GridItem v-for="item in layoutListYingCangShuRuItems" :key="item.i" :x="item.x" :y="item.y" :w="item.w"
                        :h="item.h" :i="item.i" @resize="handleResize" @moved="moved"
                        @mouseup="(event) => yingCangToXianShi(event, divRongQi)" :is-resizable="false"
                         style="display: flex; border: 1px sandybrown solid;">
                        <div class="biaoqian1"  > {{ item.i }}</div>  <div class="biaoqian2">({{ item.ws }}格) {{ item.type }}</div> 

                    </GridItem>
 



                    
                </GridLayout>
            </div>


            <div class="right" id="rongqixianshi">
                <div style="width: 100%;height: 24px;border-bottom: 1px solid black;padding-left: 8px;">已显示元素</div>
              <GridLayout v-model:layout="layoutListXianShiShuRu" :col-num="6" :row-height="24" is-draggable is-resizable vertical-compact
          use-css-transforms>
          <GridItem v-for="item in layoutListXianShiShuRuItems" :key="item.i" :x="item.x" :y="item.y" :w="item.w" :h="item.h"
            :i="item.i" @resize="handleResize" @moved="moved" @mouseup="(event) => xianShiToYingCang(event, 'rongqiyingcang')"  :is-resizable="false"
             style="display: flex; border: 1px green solid;">
            <div class="biaoqian1"  > {{ item.i }}</div>  <div class="biaoqian2"> ({{ item.ws }}格) {{ item.type }}</div> 
          </GridItem>
 

          
        </GridLayout>
            </div>

        </div>
        <div class="bottom">
            <div style="height: 70%;border-bottom: 1px solid black;"> <el-label>字体颜色：</el-label><el-input v-model="color" style="width: 150px;" /></div>

           <div style="height: 30%;border-bottom: 1px solid black;float: right;"> <el-button type="primary">退出</el-button><el-button type="primary">保存自定义数据</el-button></div>

        </div>
        
    </div>
</template>


<style lang="scss" scoped>
.biaoqian1 {
                font-family: Microsoft YaHei, Microsoft YaHei;
                font-weight: bold;
                font-size: 16px;
                color: #333333;
                line-height: 20px;
                text-align: left;
                font-style: normal;
                width: 50%;
              
             
}

.biaoqian2 {
    font-family: Microsoft YaHei, Microsoft YaHei;
                font-weight: bold;
                 
                color: #333333;
                line-height: 20px;
                
                font-style: normal;
                width: 50%;
                text-align: right;
                font-size: 10px; 
}

.main {
    width: 100%;
    height: 100%;
    padding:8px ;
    .top {
        width: 100%;
        height: 76%;
        background: #F7F7F7;
        display: flex;
        justify-content: space-between;

        .left {
            width: calc(calc(100% - 10px)/2);
            height: 100%;
            background: #FFFFFF;
            border : 1px solid #E0E0E0;
        }

        .right {

            width: calc(calc(100% - 10px)/2);
            height: 100%;
            background: #FFFFFF;
            border : 1px solid #E0E0E0;
        }

    }

    .bottom {
        margin-top: 8px;
        padding:8px ;
        border : 1px solid #E0E0E0;
        width: 100%;
        height: 24%;
        background: #F7F7F7;
    }
}
</style>